import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <div className="flex flex-col">
      {/* 英雄区域 */}
      <section className="relative bg-blue-600 text-white">
        <div className="absolute inset-0 overflow-hidden">
          <Image 
            src="/images/hero-bg.jpg" 
            alt="幸福家庭" 
            fill 
            className="object-cover opacity-30"
            priority
          />
        </div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
          <div className="md:w-2/3">
            <h1 className="text-4xl md:text-5xl font-bold mb-6">专业家政服务，让家更温馨</h1>
            <p className="text-xl mb-8">百善家政提供全方位的家政服务，包括家庭保洁、月嫂服务、育儿嫂、养老护理等，用心服务每一个家庭。</p>
            <div className="flex flex-wrap gap-4">
              <Link
                href="/services"
                className="bg-white text-blue-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition-colors"
              >
                了解服务
              </Link>
              <Link
                href="/contact"
                className="border border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-blue-600 transition-colors"
              >
                联系我们
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 服务项目 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">我们的服务</h2>
            <p className="mt-4 text-lg text-gray-600">百善家政提供多种专业家政服务，满足您的各种需求</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* 家庭保洁 */}
            <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="h-48 relative">
                <Image
                  src="/images/cleaning.jpg"
                  alt="家庭保洁服务"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">家庭保洁</h3>
                <p className="text-gray-600 mb-4">
                  提供专业的家庭清洁服务，包括日常保洁、深度清洁、开荒保洁等，让您的家居环境整洁舒适。
                </p>
                <Link
                  href="/services#cleaning"
                  className="text-blue-600 font-medium hover:text-blue-800"
                >
                  了解更多 &rarr;
                </Link>
              </div>
            </div>

            {/* 月嫂服务 */}
            <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="h-48 relative">
                <Image
                  src="/images/maternity.jpg"
                  alt="月嫂服务"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">月嫂服务</h3>
                <p className="text-gray-600 mb-4">
                  专业月嫂为产妇和新生儿提供全面照顾，包括产妇护理、新生儿护理、母乳喂养指导等。
                </p>
                <Link
                  href="/services#maternity"
                  className="text-blue-600 font-medium hover:text-blue-800"
                >
                  了解更多 &rarr;
                </Link>
              </div>
            </div>

            {/* 育儿嫂 */}
            <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="h-48 relative">
                <Image
                  src="/images/childcare.jpg"
                  alt="育儿嫂服务"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">育儿嫂</h3>
                <p className="text-gray-600 mb-4">
                  专业育儿嫂帮助照顾婴幼儿，促进宝宝健康成长，提供科学育儿指导和日常生活照料。
                </p>
                <Link
                  href="/services#childcare"
                  className="text-blue-600 font-medium hover:text-blue-800"
                >
                  了解更多 &rarr;
                </Link>
              </div>
            </div>
          </div>

          <div className="mt-10 text-center">
            <Link
              href="/services"
              className="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
            >
              查看全部服务
            </Link>
          </div>
        </div>
      </section>

      {/* 关于我们 */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="lg:flex lg:items-center lg:space-x-12">
            <div className="lg:w-1/2 mb-8 lg:mb-0">
              <div className="rounded-lg h-80 relative overflow-hidden">
                <Image
                  src="/images/company.jpg"
                  alt="公司简介"
                  fill
                  className="object-cover"
                />
              </div>
            </div>
            <div className="lg:w-1/2">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">关于百善家政</h2>
              <p className="text-gray-600 mb-6">
                百善家政成立于2010年，是一家专注于提供高品质家政服务的企业。我们拥有一支经过专业培训的家政服务团队，致力于为客户提供专业、贴心、高效的家政服务。
              </p>
              <p className="text-gray-600 mb-6">
                多年来，我们服务了上万个家庭，获得了客户的一致好评。我们的宗旨是"用心服务，让家更美好"，我们将继续秉承这一理念，为更多家庭带去温馨和便利。
              </p>
              <Link
                href="/about"
                className="inline-block border border-blue-600 text-blue-600 px-6 py-3 rounded-md font-medium hover:bg-blue-600 hover:text-white transition-colors"
              >
                了解更多
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 客户评价 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">客户评价</h2>
            <p className="mt-4 text-lg text-gray-600">听听我们的客户怎么说</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow">
              <div className="flex items-center mb-4">
                <div className="h-12 w-12 rounded-full overflow-hidden relative mr-4">
                  <Image
                    src="/images/testimonial1.jpg"
                    alt="张女士"
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <h4 className="font-semibold">张女士</h4>
                  <p className="text-gray-500 text-sm">北京市朝阳区</p>
                </div>
              </div>
              <p className="text-gray-600">
                "百善家政的月嫂非常专业，照顾我和宝宝很周到，给了我很多实用的育儿建议，让我这个新手妈妈少走了很多弯路。"
              </p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow">
              <div className="flex items-center mb-4">
                <div className="h-12 w-12 rounded-full overflow-hidden relative mr-4">
                  <Image
                    src="/images/testimonial2.jpg"
                    alt="李先生"
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <h4 className="font-semibold">李先生</h4>
                  <p className="text-gray-500 text-sm">北京市海淀区</p>
                </div>
              </div>
              <p className="text-gray-600">
                "家里老人需要照顾，百善家政的养老护理员非常耐心细致，老人很喜欢她，我们全家都很放心。"
              </p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow">
              <div className="flex items-center mb-4">
                <div className="h-12 w-12 rounded-full overflow-hidden relative mr-4">
                  <Image
                    src="/images/testimonial3.jpg"
                    alt="王女士"
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <h4 className="font-semibold">王女士</h4>
                  <p className="text-gray-500 text-sm">北京市西城区</p>
                </div>
              </div>
              <p className="text-gray-600">
                "百善家政的保洁服务很专业，阿姨们工作认真负责，家里每次打扫完都焕然一新，很满意！"
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 预约服务 */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold mb-4">需要家政服务？立即联系我们</h2>
          <p className="text-xl mb-8 max-w-3xl mx-auto">
            无论您需要什么样的家政服务，百善家政都能为您提供专业的解决方案。
          </p>
          <Link
            href="/contact"
            className="inline-block bg-white text-blue-600 px-8 py-4 rounded-md font-medium text-lg hover:bg-gray-100 transition-colors"
          >
            立即预约
          </Link>
        </div>
      </section>
    </div>
  );
}
